<template>
  <div class="app-container" style="background: #E6EBE9;">
    <el-card shadow="never" class="page-top">
      <!-- <div style="margin-bottom: 20px;">
        <span>
          选择日期：
        </span>
        <el-date-picker class="echarts-top-time" size="mini" v-model="datePicker" @change="changeTime" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
         <el-button size="mini" @click="resetTime" type="primary">重置时间</el-button> 
      </div> -->

      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/icons/zhuanjia.png" alt="">
        <div class="echarts-top-tit">专家地区分布</div>
      </div>
      <div style="display: flex;width: 1580px;">
        <echartOne ref="echartOne" :timer="timer"></echartOne>
        <div class="table-list">
          <el-table :data="list1" :stripe="true" style="width: 100%">
            <el-table-column prop="area" align="center" label="省辖市" />
            <el-table-column prop="proLevel" align="center" label="省级专家数" />
            <el-table-column prop="cityLevel" align="center" label="市级专家数" />
            <el-table-column prop="areaLevel" align="center" label="县级专家数" />
            <el-table-column prop="total" align="center" label="合计">
              <template slot-scope="scope">
                <span style="color: #27A280;">{{ scope.row.total }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="page-top">
      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/icons/zhuanjia.png" alt="">
        <div class="echarts-top-tit">专家增长数</div>
      </div>
      <div style="display: flex;width: 1580px;">
        <echartTwo ref="echartTwo" :timer="timer"></echartTwo>
        <div class="table-list">
          <el-table :data="list2" :stripe="true" style="width: 100%">
            <el-table-column prop="area" align="center" label="年份" />
            <el-table-column prop="proLevel" align="center" label="省级专家数" />
            <el-table-column prop="cityLevel" align="center" label="市级专家数" />
            <el-table-column prop="areaLevel" align="center" label="县级专家数" />
            <el-table-column prop="total" align="center" label="合计">
              <template slot-scope="scope">
                <span style="color: #27A280;">{{ scope.row.total }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!-- <div style="display: flex;gap: 10px;">
      <el-card shadow="never" style="width: 400px;">
        <div class="echarts-top">
          <img class="echarts-top-img" src="/static/icons/sex.png" alt="">
          <div class="echarts-top-tit">专家性别分布</div>
        </div>
        <echartThree></echartThree>
      </el-card>
      <el-card shadow="never" style="width: 600px;">
        <div class="echarts-top">
          <img class="echarts-top-img" src="/static/icons/age.png" alt="">
          <div class="echarts-top-tit">专家年龄分布</div>
        </div>
        <echartFour></echartFour>
      </el-card>
      <el-card shadow="never" style="width: 600px;">
        <div class="echarts-top">
          <img class="echarts-top-img" src="/static/icons/shanchang.png" alt="">
          <div class="echarts-top-tit">专家擅长分布</div>
        </div>
        <echartFive></echartFive>
      </el-card>
    </div> -->
    <el-card shadow="never">
      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/icons/tongji.png" alt="">
        <div class="echarts-top-tit">专家作品数量（TOP*统计）</div>
      </div>
      <echartSix ref="echartSix" :timer="timer"></echartSix>
    </el-card>
    <el-card shadow="never">
      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/icons/tongji.png" alt="">
        <div class="echarts-top-tit">专家作品浏览量（TOP*统计）</div>
      </div>
      <echartSeven ref="echartSeven" :timer="timer"></echartSeven>
    </el-card>
    <el-card shadow="never">
      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/icons/tongji.png" alt="">
        <div class="echarts-top-tit">专家作品收藏量（TOP*统计）</div>
      </div>
      <echartEight ref="echartEight" :timer="timer"></echartEight>
    </el-card>
  </div>
</template>

<script>
import echartOne from './echartOne.vue';
import echartTwo from './echartTwo.vue';
import echartThree from './echartThree.vue';
import echartFour from './echartFour.vue';
import echartFive from './echartFive.vue';
import echartSix from './echartSix.vue';
import echartSeven from './echartSeven.vue';
import echartEight from './echartEight.vue';
import * as expertAnalysis from '../../api/expertAnalysis.js'
export default {
  components: { echartOne, echartTwo, echartThree, echartFour, echartFive, echartSix, echartSeven, echartEight },
  data () {
    return {
      datePicker: [],
      timer: [],
      echart: null,
      list1: [
        {
          a: '省级',
          b: '/',
          c: '0',
          d: '12',
          e: '12'
        }, {
          a: '西安市',
          b: '/',
          c: '192',
          d: '12',
          e: '204'
        }, {
          a: '渭南市',
          b: '/',
          c: '98',
          d: '7',
          e: '105'
        }, {
          a: '宝鸡市',
          b: '/',
          c: '182',
          d: '123',
          e: '305'
        }, {
          a: '咸阳市',
          b: '/',
          c: '10',
          d: '20',
          e: '30'
        }],
      list2: [
        {
          a: '2019年',
          b: '/',
          c: '0',
          d: '12',
          e: '12'
        }, {
          a: '2020年',
          b: '/',
          c: '192',
          d: '12',
          e: '204'
        }, {
          a: '2021年',
          b: '/',
          c: '98',
          d: '7',
          e: '105'
        }, {
          a: '2022年',
          b: '/',
          c: '182',
          d: '123',
          e: '305'
        }, {
          a: '2023年',
          b: '/',
          c: '10',
          d: '20',
          e: '30'
        },]
    };
  },
  mounted () {
    this.getData(this.timer)
  },

  methods: {
    changeTime (e) {
      if(e===null){
        this.timer = []
      }else{
        this.timer = e
      }
      this.getData(this.timer)
    },
    resetTime () {
      this.timer = ['', '']
      this.getData()
    },
    getTime () {
      // 获取今日日期
      this.today = this.moment().format('YYYY-MM-DD');
      // 获取一年前的日期
      this.oneYearAgo = this.moment().subtract(1, 'year').format('YYYY-MM-DD');
      // 获取半年前的日期
      this.sixMonthsAgo = this.moment().subtract(6, 'months').format('YYYY-MM-DD');
      // 获取一个月前的日期
      this.oneMonthAgo = this.moment().subtract(1, 'month').format('YYYY-MM-DD');
      // 获取七天前的日期
      this.sevenDaysAgo = this.moment().subtract(7, 'days').format('YYYY-MM-DD');
      // 获取昨日日期
      this.yesterday = this.moment().subtract(1, 'days').format('YYYY-MM-DD');

    },
    seletDate (data) {
      this.btnName = data
      if (data === '近一年') {
        this.time = [this.oneYearAgo, this.today]
      } else if (data === '昨日') {
        this.time = [this.yesterday, this.today]
      } else if (data === '仅七天') {
        this.time = [this.sevenDaysAgo, this.today]
      } else if (data === '近一个月') {
        this.time = [this.oneMonthAgo, this.today]
      } else if (data === '近半年') {
        this.time = [this.sixMonthsAgo, this.today]
      }
    },
    getData (timer) {
      this.getList()
      this.$refs.echartOne.getData(timer)
      this.$refs.echartTwo.getData(timer)
      this.$refs.echartSix.getData(timer)
      this.$refs.echartSeven.getData(timer)
      this.$refs.echartEight.getData(timer)
    },
    getList () {
      let param = {
        startTime: this.timer[0],
        endTime: this.timer[1]
      }
      expertAnalysis.queryGroupByDependency(param).then(response => {
        if (response.state == "SUCCESS") {
          this.list1 = response.data.map(item => ({
            area: item.area_city,
            proLevel:item.p_cnt,
            cityLevel:item.c_cnt,
            areaLevel:item.a_cnt,
            total:item.area_cnt
          }))
        }
      }).catch(error => {
        console.log(error)
      })
      expertAnalysis.queryGroupByYear(param).then(response => {
        if (response.state == "SUCCESS") {
          this.list2 = response.data.map(item => ({
            area: item.c_year+'年',
            proLevel:item.p_cnt,
            cityLevel:item.c_cnt,
            areaLevel:item.a_cnt,
            total:item.year_cnt
          }))
        }
      }).catch(error => {
        console.log(error)
      })

    }
  },
};
</script>
<style lang="scss" scoped>
.page-top {
  width: 1600px;
  margin: 10px 0;
}

.echarts-top {
  position: relative;
  height: 40px;
  display: flex;

  .echarts-top-img {
    position: absolute;
    top: 10px;
    left: 0;
  }

  .echarts-top-tit {
    position: absolute;
    top: 10px;
    left: 24px;
    color: #4C4C4C;
    margin-left: 10px;
  }

  .echarts-top-radio {
    position: absolute;
    top: 6px;
    left: 190px;
  }

  .echarts-top-btn {
    position: absolute;
    top: 6px;
    left: 560px;
    display: flex;
    gap: 16px;

    .btnSelet {
      background: #27A280;
      color: #fff;
    }
  }

  .echarts-top-time {
    position: absolute;
    top: 6px;
    left: 1060px;
  }
}

.table-list {
  width: 704px;
  padding-right: 30px;
}
</style>